<template>
  <div class="SituationMap bgc-icon">
    <div id="container"></div>
    <div class="latest-information">
      <div class="latest-information-title">
        最新警情
      </div>
      <div class="latest-information-contain font-table">
        <div v-for="info in infos" class="latest-information-contain-card">
          <div class="latest-information-contain-card-header d-f jc-between ai-c">
			<el-tooltip class="item" effect="dark" placement="top-start">
			  <div slot="content">{{ info.ay }}</div>
              <div class="latest-information-contain-card-header-text ellipsis">
				{{info.ay}}
              </div>
            </el-tooltip>
            <div class="latest-information-contain-card-header-button">{{info.jqmc}}</div>
          </div>
          <div class="latest-information-contain-card-block d-f">
            <div class="latest-information-contain-card-block-label">
              报警时间
            </div>
            <div class="latest-information-contain-card-block-text ellipsis">
              {{info.bjsj}}
            </div>
          </div>
          <div class="latest-information-contain-card-block d-f">
            <div class="latest-information-contain-card-block-label">
              事发地点
            </div>
            <div class="latest-information-contain-card-block-text ellipsis">
              {{info.sacsDzmc}}
            </div>
          </div>
          <div class="latest-information-contain-card-block d-f">
            <div class="latest-information-contain-card-block-label">
              警情状态
            </div>
            <div class="latest-information-contain-card-block-text ellipsis">
              {{info.jqjb}}
            </div>
          </div>
          <div class="latest-information-contain-card-block d-f">
            <div class="latest-information-contain-card-block-label">
              处理人
            </div>
              <div class="latest-information-contain-card-block-text ellipsis">
				{{info.clrXm}}
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="toggle-button-group d-f font-table">
      <div
          @click="changeButton('1')"
          style="border-top-left-radius: 5px;border-bottom-left-radius: 5px"
          :class="[ currentButton=='1'?'toggle-button-group-select':'toggle-button-group-unselect' ,'d-f jc-c ai-c']">
        <span class="bgc-icon toggle-button-group-security"></span>
        安保态势
      </div>
      <div
          @click="changeButton('2')"
          :class="[ currentButton=='2'?'toggle-button-group-select':'toggle-button-group-unselect' ,'d-f jc-c ai-c']">
        <span class="bgc-icon toggle-button-group-personnel"></span>
        人员态势
      </div>
      <div
          @click="changeButton('3')"
          :class="[ currentButton=='3'?'toggle-button-group-select':'toggle-button-group-unselect' ,'d-f jc-c ai-c']">
        <span class="bgc-icon toggle-button-group-vehicle"></span>
        车辆态势
      </div>
      <div
          style="border-top-right-radius: 5px;border-bottom-right-radius: 5px"
          @click="changeButton('4')"
          :class="[ currentButton=='4'?'toggle-button-group-select':'toggle-button-group-unselect' ,'d-f jc-c ai-c']">
        <span class="bgc-icon toggle-button-group-event"></span>
        事件态势
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SituationMap",
  data() {
    return {
      map: null,
      currentButton: '1',
	  content:'',
	  infos:[]
    }
  },
  methods: {
    changeButton(params) {
      this.currentButton = params
    },
	getJqxxData(){
		this.axios.post('/dxhd-jq/selectPage', {
		  current: 1,
		  size: 4,
		  entity: {}
		}).then((res) => {
			this.infos = res.data.records;
		    for (var obj in res.data.records) {
				this.content = res.data.records[obj].ay;
			}
		}).catch((error) => {
			this.$message({
				message: '数据查询失败！'+error,
			    type: 'error',
			});
		});
	}
  },
  mounted() {
    this.$nextTick(() => {
      this.map = new BMapGL.Map('container'); // 创建Map实例
      this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    })
	
	this.getJqxxData();
  }
}
</script>

<style lang="scss">
.SituationMap {
  position: relative;
  background-image: url(../assets/imgs/baidu_map.png);

  #container {
    position: relative;
    overflow: hidden;
    height: calc(100vh - 110px);
    margin: 0;
    padding: 0;
  }

  .latest-information {
    position: absolute;
    top: 20px;
    left: 22px;
    z-index: 1000;

    .latest-information-title {
      width: 330px;
      height: 36px;
      background: #1C9BEC;
      font-size: 16px;
      font-weight: 600;
      color: #FFFFFF;
      line-height: 36px;
      text-align: center;
    }

    .latest-information-contain {
      padding: 8px;
      background-color: #fff;
      overflow-y: auto;
      max-height: calc(100vh - 200px);

      .latest-information-contain-card {
        margin-bottom: 8px;

        .latest-information-contain-card-header {
          width: 314px;
          height: 36px;
          padding: 0px 6px;
          background: #CFD7EA;
          border: 1px solid #D1D8EB;

          .latest-information-contain-card-header-text {
            width: 208px;

            color: #000000;
          }

          .latest-information-contain-card-header-button {
            padding: 4px;
            background: linear-gradient(180deg, #F5515F 0%, #9F041B 100%);
            color: #FFFFFF;
            border-radius: 2px;
            text-align: center;
          }
        }

        .latest-information-contain-card-block {
          border: 1px solid #D8DDEA;
          background-color: #FFFFFF;
          line-height: 32px;
          color: #000000;

          .latest-information-contain-card-block-label {
            width: 66px;
            background: #EDEFF4;
            text-align: center;
          }

          .latest-information-contain-card-block-text {
            padding: 0 16px;
            width: 247px;
          }
        }
      }
    }
  }

  .toggle-button-group {
    position: absolute;
    top: 20px;
    left: 450px;
    z-index: 1000;

    .toggle-button-group-security {
      width: 16px;
      height: 16px;
      color: #FFFFFF;
      background-image: url(../assets/imgs/anbao.svg);
      margin-right: 2px;
    }

    .toggle-button-group-personnel {
      width: 16px;
      height: 16px;
      color: #FFFFFF;
      background-image: url(../assets/imgs/renyuan.svg);
      margin-right: 2px;
    }

    .toggle-button-group-vehicle {
      width: 16px;
      height: 16px;
      color: #FFFFFF;
      background-image: url(../assets/imgs/cheliang.svg);
      margin-right: 2px;
    }

    .toggle-button-group-event {
      width: 16px;
      height: 16px;
      color: #FFFFFF;
      background-image: url(../assets/imgs/shijian.svg);
      margin-right: 2px;
    }

    .toggle-button-group-select {
      cursor: pointer;
      background-image: url(../assets/imgs/select_button.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 0;
      width: 114px;
      height: 45px;
      color: #FFFFFF;
    }

    .toggle-button-group-unselect {
      cursor: pointer;
      background-image: url(../assets/imgs/un_select_button.svg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 0;
      width: 114px;
      height: 45px;
      color: #FFFFFF;
    }
  }
}

</style>


